<template>
  <div>
    <div style="text-align: center">
      <el-input v-model="queryParams.keyword" placeholder="请输入内容" style="width: 400px"></el-input>
      <el-button type="primary" @click="showSearch" >搜索</el-button>
    </div>
    <div>
      <el-breadcrumb separator=">">
        <el-breadcrumb-item>全部结果</el-breadcrumb-item>
        <div v-for="search in queryParams">
          <el-breadcrumb-item><a href="">{{ search }}</a></el-breadcrumb-item>
        </div>
      </el-breadcrumb>
    </div>

    <div>
      <el-table :data="searchResult.attrs" style="width: 100%">
        <el-table-column width="180">
          <template slot-scope="scope">{{ scope.row.attrName }}</template>
        </el-table-column>
        <el-table-column width="180">
          <template slot-scope="scope" >

            <el-button type="primary" @click="selectAttrs(scope.row.attrId,scope.row.attrName,item)" v-for="item in scope.row.attrValue">{{ item }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div  >
      <el-card  v-for="item in searchResult.products" class="floatLeft">
        <img @click="itemDetails(item.skuId)" src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
        <div style="width: 200px">
          <span @click="itemDetails(item.skuId)" v-html="item.skuTitle"></span>
        </div>
        <div>
          <span style='color:red;font-size: 30px'>￥{{item.skuPrice}}</span>
        </div>
      </el-card>

    </div>
    <div class="clear" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchResult.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { listSku } from "@/api/search/sku";

export default {
  name: "Sku",
  data() {
    return {
      queryParams: {},
      searchResult:[],

    };
  },
  created() {
    this.getList();
  },

  methods: {
    /** 查询sku列表 */
    getList() {
      listSku(this.queryParams).then(response => {
        this.searchResult = response.data;
      })
    },


    itemDetails(skuId){
      this.$router.push("/detail/"+skuId)
    },
    showSearch(){
      this.getList()
    },

    selectAttrs(arrId,attrName,attrValue){
      this.queryParams.attrs = arrId + "_" + attrName + ":" + attrValue
      this.getList()
    },

    handleSizeChange(value){
      this.queryParams.pageSize = value
      this.getList()
    },

    handleCurrentChange(value){
      this.queryParams.pageNum = value
      this.getList()
    }
  }
};
</script>
<style scoped>
.floatLeft{
  float: left;
  margin-left: 20px;
  margin-bottom: 20px;
  margin-top: 10px;
}
.clear{
  clear:both;
}
</style>
